<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>梯梯</title>
    <link rel="stylesheet" href="../css/admin.css">
     <link rel="stylesheet" href="../layui/css/layui.css">
   <!--   <link rel="stylesheet" href="../css/organzition.css">  -->
  <!--    <link rel="stylesheet" href="../css/lift.css"> -->
    <link rel="stylesheet" href="../fonts/iconfont.css">        
</head>
<style>
  /*
* @Author: Administrator
* @Date:   2017-11-02 09:20:50
* @Last Modified by:   Administrator
* @Last Modified time: 2017-11-02 13:37:43
*/
  *{
   margin:0;
   padding:0;  
} 
.top{
  width:100%;
  height:80px;
  line-height: 80px;
}
.top .text-check{
  font-size:14px;
  margin-left:30px;
  display: inline-block;
}
.chose{
  color:#888;
  margin-left: 30px;
  display: inline-block;
}
.layui-inline{
  margin-left:20px;
  display: inline-block;
}
.layui-input-inline{
  width:120px;
  height:79px;
  display: inline-block;
}
.layui-form-label{ 
  margin-top:28px;
  width:32px;
  padding:2px 10px 5px 4px;
  border:1px solid #888;
  border-right:none;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}
.layui-input{
  height:29px;
  width:100px;
  border:1px solid #888;
  border-left:none;
  outline:none;  
  font-size: 14px;  
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  display: inline-block;
/*  background-color: cyan;  */
}
.layui-btn,.layui-btn-outer{
  color:white;
  border:0; 
  height:28px;
  line-height: 28px;
  font-size:14px;
  outline: none;
  border-radius:5px;
  display: inline-block;  
  background-color: #EF7632;    
}
.layui-btn{
  width:92px;
}
.layui-btn-outer{
  width:160px;
  margin-left:40px;
}
/* table部分 */
.detail{
  width:600;
  height:600px;
}
.layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th{
  border-bottom: 0;
  background-color:#FFECE2;
}
/* 分页 */
#page-num{
    display: inline-block;
 } 
 .layui-laypage a, .layui-laypage span{
  border:none;
  border-radius:30px;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height:20px;
  padding:0;
  margin-left:3px;
 }
 .layui-laypage>:first-child, .layui-laypage>:first-child em{
  border-radius:30px;
 }
.layui-laypage>:last-child, .layui-laypage>:last-child em{
  border-radius:30px; 
}
.layui-laypage .layui-laypage-curr .layui-laypage-em{
  border-radius:30px;
  background-color: #EF7632;
}
#page-fen{
    display: inline-block;
    float: right; 
}
#page-counter{
  display: inline-block;
}
#page-num{
display: inline-block;
margin-left:15px;
margin-right:30px;
}
</style>
<body>
<div class="container-one">
  <div class="top">  
    <p class=text-check>查看消费类型</p>
    <div class="chose">
      <span>乘梯</span>&nbsp;<input type="radio" name="role" value="taxt" title=""  checked>
            &emsp;<span>全部</span>&nbsp;<input type="radio" name="role" value="all" title="" >
            &emsp;<span>充值</span>&nbsp;<input type="radio" name="role"  value="money" title="">
    </div>    
    <!-- 日期 --> 
    <div class="layui-inline">
          <!-- <label class="layui-form-label">日期</label> -->         
          <label class="layui-form-label">日期</label><div class="layui-input-inline">
            <input class="layui-input layui-date" placeholder="" id="start">
          </div>
        </div>
        <span>至</span>
        <div class="layui-inline">  
          <label class="layui-form-label">日期</label><div class="layui-input-inline">
            <input class="layui-input layui-date" placeholder="" id="end">
          </div>
        </div>  
    <button class="layui-btn " lay-submit=""><span class="iconfont icon-sousuokuang"></span>&emsp;搜&nbsp;索</button>
        <button class="layui-btn-outer" lay-submit="">导出本次查询数据</button>
   </div>
  </div> 
  <!--  表格部分 -->
<div class="detail">
     <table class="layui-table" lay-skin="line">
      <thead >
         <tr>
           <th>编号</th>
           <th>小区</th>
           <th>单元</th>
           <th>住户</th>
           <th>用户名称</th>
           <th>时间</th>
           <th>消费类型</th> 
           <th>乘梯型号</th> 
           <th>消费金额</th> 
           <th>账户余额</th> 
         </tr>
      </thead>
      <tbody class="org-table">
        <script type="text/html" id="tableTemp">
        </script>
      </tbody>
      </table>
    <div id="page-fen">
        <p id="page-counter">共有80条记录</p>
        <div id="page-num"></div>
    </div>
  </div>
   <!--  表格部分 --> 
  <script src="../lib/jquery.js" type="text/javascript"></script>
  <script type="text/javascript" src="../layui/layui.js"></script>
  <script src="../lib/js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
  layui.use(['jquery', 'laydate','form','layer','laypage'], function(){
      var $ = layui.jquery,
          laydate = layui.laydate,
          layer = layui.layer,
          laypage = layui.laypage;
        /*  or需要*/
         var element = layui.element;
        /*table渲染部分*/
                var a = {count: 10};
        searchTable(a);
        function searchTable(param){
          $.ajax({
          url: 'http://api.douban.com/v2/movie/in_theaters',
          type: 'get',
          dataType: 'jsonp',
          data: param || {},
        })
        .done(function(data){
          console.log(data);
          var str= '';
          if(data.subjects.length){
            for(var i=0;i<data.subjects.length;i++){
            str +=
            '<tr>'+
            '<td>'+ 1 +'</td>'+
            '<td>'+ data.subjects[i].title +'</td>'+
            '<td>'+ data.subjects[i].year +'</td>'+
            '<td>'+ data.subjects[i].subtype +'</td>'+
            '<td>'+ data.subjects[i].title +'</td>'+
            '<td><span class="price">'+ data.subjects[i].title +'</span></td>'+      
            '<td>'+ data.subjects[i].year +'</td>'+
            '<td>'+ data.subjects[i].year +'</td>'+
            '<td>'+ data.subjects[i].year +'</td>'+
            '<td>'+ data.subjects[i].year +'</td>'+
            '</tr>'
          }
          $(".org-table").html(str);
        }else{
          str = '<tr><td colspan="7">暂无数据</td></tr>';
          $(".org-table").html(str);
        }
        })
        .fail(function() {
          console.log("error");
        });
        }
     /*分页js的实现*/
 laypage({
    cont: 'page-num'
    ,pages: 8
    ,first: 1
    ,last:false
    ,groups:6
    ,prev: '<em><</em>'
    ,next: '<em>></em>'
  });
  /*      });*/
/*分页js的实现*/
            // 开始时间及截止时间
            var start = {
         choose: function(datas){
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
          }
        };        
        var end = {
          choose: function(datas){
            start.max = datas; //结束日选好后，重置开始日的最大日期
          }
        };
      $('#start').click(function(){
        start.elem = this;
          laydate(start);
      });

      $('#end').click(function(){
        end.elem = this
          laydate(end);
      });    
 });
</script>
 </body>
</html>
